<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" type="card">
      <el-tab-pane
        :name="tab.name"
        v-for="(tab, index) in tabData"
        :key="tab.name"
      >
        <!-- 导航标题区域 -->
        <template #label>
          <div
            class="title"
            :class="activeIndex == index ? 'active' : ''"
            @mouseenter="tabEnter(index)"
            @mouseleave="tabLeave"
          >
            {{ tab.label }}
          </div>
        </template>
        <!-- 导航内容区域 -->
        <div class="contentSearch">
          <el-input
            class="contentSearchIpt"
            :prefix-icon="Search"
            size="large"
            maxlength="50"
            v-model="searchVal"
            :style="{ width: '35%' }"
          >
            <template #append>
              <el-button>搜索</el-button>
            </template>
          </el-input>

          <div class="contentDelete" v-if="isShow">
            <span v-show="!isShowDetele" @click="isShowDetele = true"
              >批量删除</span
            >
            <div class="operating" v-show="isShowDetele">
              <span @click="isShowDetele = false">取消</span>
              <span @click="isShowDetele = false">确定</span>
              <span>全选</span>
            </div>
          </div>
        </div>

        <!-- table表格区域 -->
        <el-table
          :data="tab.content"
          style="width: 100%"
          empty-text="无更多内容"
        >
          <el-table-column prop="cover" width="560">
            <template #default="{ row }">
              <div class="coverContent">
                <img
                  :src="row.cover"
                  width="180"
                  style="borderradius: 4px; margin-right: 15px"
                />
                <div class="coverRight">
                  <div class="coverRight_top">{{ row.planName }}</div>
                  <div class="coverRight_bottom">视频</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="right" />
          <el-table-column width="180" align="right" v-if="isShow">
            <template #default="{ row }">
              <div class="deleteBtn">
                <span v-show="!isShowDetele">删除</span>

                <el-icon
                  v-show="isShowDetele"
                  class="icon"
                  color="#D8D9DD"
                  :size="20"
                >
                  <CircleCheckFilled />
                </el-icon>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "PractionsContent",
});
</script>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref, defineProps } from "vue";

//拿到props的数据
defineProps(["tabData", "isShow"]);
//tab选项初始值
const activeName = ref("first");
//active显示与隐藏初始值
const activeIndex = ref(-1);
//搜索框数据
const searchVal = ref("");

//批量删除按钮是否显示隐藏
const isShowDetele = ref(false);

//移入事件回调
const tabEnter = (index: number) => {
  activeIndex.value = index;
};
//移出事件回调
const tabLeave = () => {
  activeIndex.value = -1;
};
</script>

<style lang="less" scoped>
:deep(.el-tabs) {
  font-size: 14px;
  //头部导航
  .el-tabs__header {
    padding: 22px 30px;
    background-color: #fff;
    border-bottom-color: rgba(0, 0, 0, 0) !important;

    .el-tabs__nav {
      border: none;
      box-sizing: border-box;
      .el-tabs__item {
        cursor: pointer;
        border-radius: 4px;
        color: #7d8090;
        padding: 9px 12px;
        border-left: none;
        line-height: 30px;
        text-align: center;
        margin-right: 24px;
        height: 64px !important;

        .title {
          height: 68px;

          &::after {
            position: absolute;
            content: " ";
            height: 4px;
            width: 37px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: background-color 0.3s ease;
          }
        }

        .active::after {
          background-color: #f93684;
        }
        &.is-active {
          border-bottom-color: rgba(0, 0, 0, 0) !important;
          &::after {
            position: absolute;
            content: " ";
            background-color: #f93684;
            height: 4px;
            width: 37px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: background-color 0.3s ease;
          }
        }
      }
    }
  }

  //底部内容
  .el-tabs__content {
    position: static;
    padding: 0 30px 20px;
    background-color: #fff;
    border-radius: 4px;
    min-height: 700px;

    //搜索区域
    .contentSearch {
      margin-top: 15px;
      display: flex;
      margin-left: 10px;
      justify-content: space-between;
      align-items: center;

      .el-input {
        .el-input__wrapper {
          background-color: #f5f7f9;
          margin-right: 15px;
          border-radius: 4px;
        }

        .el-input-group__append {
          border-radius: 4px;
          box-shadow: 0 0 0 0;
        }
      }

      .contentDelete {
        color: #111;
        .operating {
          color: #f93684;
          span {
            cursor: pointer;
            &:nth-of-type(2) {
              margin: 0 25px 0 18px;
            }
          }
        }
      }
    }
    //内容区域
    .el-table__header {
      thead {
        tr {
          &:first-child th {
            border-bottom: none;
          }
        }
      }
    }
    .coverContent {
      display: flex;
      .coverRight {
        font-size: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .coverRight_bottom {
          font-size: 14px;
          color: rgb(125, 128, 144);
        }
      }
    }
  }
}
</style>
